<script setup lang='ts'>
import { useRoute } from 'vue-router';


const appStore = useAppStore()

console.log(appStore.menuList)

defineOptions({
  name: ''
})

const route = useRoute()
const router = useRouter()

const goPage = (item) => {
  if (item.path) {
    router.push(item.path)
  }
}
</script>

<template>
  <div class="min-w-[198px] h-full flex flex-col items-center justify-around py-[20px]">

    <div @click="goPage(item)" v-for="(item, index) in appStore.menuList" :key="index"
      :class="route.path == item.path ? 'activer' : 'no_activer'"
      class="w-[162px] h-[56px]  flex justify-center items-center cursor-pointer">
      <div class="mr-[14px] w-[30px] h-[30px]">
        <img class="w-full h-full" :src="route.path == item.path ? item.Aing : item.Bing" alt="">
      </div>
      <span :class="route.path == item.path ? 'font-bold' : 'font-normal'"
        :style="{ 'color': route.path == item.path ? '#00440E' : '#ffffff', }" class="text">{{ item.name }}</span>
    </div>






  </div>
</template>

<style lang='scss' scoped>
.text {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 20px;
  // color: #FFFFFF;
  line-height: 23px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.activer {
  background: #F3F7F7;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: 18px 18px 18px 18px;
}
</style>
